<template xmlns:background-color="http://www.w3.org/1999/xhtml">
  <!-- 指标分类 -->
  <a-row :gutter="10">
    <a-col :md="12" :sm="24">
      <a-card :bordered="false">

        <!-- 按钮操作区域 -->
        <a-row style="margin-left: 14px">
          <a-button @click="handleAdd(1)" type="primary">添加分类</a-button>
          <a-button @click="handleAdd(2)" type="primary">添加下级</a-button>
          <a-button title="删除多条数据" @click="batchDel" type="default">批量删除</a-button>
        </a-row>
        <div style="background: #fff;padding-left:16px;height: 100%; margin-top: 5px">
          <a-alert type="info" :showIcon="true">
            <div slot="message">
              当前选择：<span v-if="this.currSelected.catalogName">{{ getCurrSelectedTitle() }}</span>
              <a v-if="this.currSelected.catalogName" style="margin-left: 10px" @click="onClearSelected">取消选择</a>
            </div>
          </a-alert>
          <a-input-search @search="onSearch" style="width:100%;margin-top: 10px" placeholder="请输入分类名称"/>
          <!-- 树-->
          <a-col :md="10" :sm="24">
            <template>
              <a-dropdown :trigger="[this.dropTrigger]" @visibleChange="dropStatus">
                <span style="user-select: none">
                  <a-tree
                    :replaceFields="replaceFields"
                    checkable
                    multiple
                    @select="onSelect"
                    @check="onCheck"
                    @rightClick="rightHandle"
                    :selectedKeys="selectedKeys"
                    :checkedKeys="checkedKeys"
                    :treeData="treeData"
                    :checkStrictly="checkStrictly"
                    :expandedKeys="iExpandedKeys"
                    :autoExpandParent="autoExpandParent"
                    @expand="onExpand"/>
                </span>
                <!--新增右键点击事件,和增加添加和删除功能-->
                <a-menu slot="overlay">
                  <a-menu-item @click="handleAdd(3)" key="1">添加</a-menu-item>
                  <a-menu-item @click="handleDelete" key="2">删除</a-menu-item>
                  <a-menu-item @click="closeDrop" key="3">取消</a-menu-item>
                </a-menu>
              </a-dropdown>
            </template>
          </a-col>
        </div>
      </a-card>
      <!---- author:os_chengtgen -- date:20190827 --  for:切换父子勾选模式 =======------>
      <div class="drawer-bootom-button">
        <a-dropdown :trigger="['click']" placement="topCenter">
          <a-menu slot="overlay">
            <a-menu-item key="1" @click="switchCheckStrictly(1)">父子关联</a-menu-item>
            <a-menu-item key="2" @click="switchCheckStrictly(2)">取消关联</a-menu-item>
            <a-menu-item key="3" @click="checkALL">全部勾选</a-menu-item>
            <a-menu-item key="4" @click="cancelCheckALL">取消全选</a-menu-item>
            <a-menu-item key="5" @click="expandAll">展开所有</a-menu-item>
            <a-menu-item key="6" @click="closeAll">合并所有</a-menu-item>
          </a-menu>
          <a-button>
            树操作 <a-icon type="up" />
          </a-button>
        </a-dropdown>
      </div>
      <!---- author:os_chengtgen -- date:20190827 --  for:切换父子勾选模式 =======------>
    </a-col>
    <a-col :md="12" :sm="24">
      <a-tabs v-model="activeKey" >
        <a-tab-pane tab="分类指标" key="2" >
          <system-sc-situation-index-info-list v-show="selectedKeys.length > 0 && addFlag != 1" ref="systemScSituationIndexInfoList"/>
          <a-card v-show="!selectedKeys.length > 0 || addFlag == 1" >
            <a-empty>
              <span slot="description"> {{ addFlag === 1 ? '请先创建分类!' : '请先选择一个指标分类!' }} </span>
            </a-empty>
          </a-card>
        </a-tab-pane>
        <a-tab-pane tab="基本信息" key="1" forceRender>
          <a-card :bordered="false" v-if="selectedKeys.length > 0 || addFlag == 1">
            <a-form :form="form">
              <a-form-item
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                label="分类名称">
                <a-input
                  placeholder="请输入分类名称"
                  allow-clear
                  v-decorator="['catalogName', validatorRules.catalogName ]"/>
              </a-form-item>
              <a-form-item
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                label="上级分类">
                <a-tree-select
                  style="width:100%"
                  disabled
                  :replaceFields="selectReplaceFields"
                  :dropdownStyle="{maxHeight:'200px',overflow:'auto'}"
                  :treeData="treeData"
                  v-decorator="['pid', {'initialValue':''}]"
                  placeholder="请选择上级分类">
                </a-tree-select>
                <!-- <a-input disabled placeholder="请输入上级分类" /> -->
              </a-form-item>
              <a-form-item
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                label="分类编码">
                <a-input
                  disabled
                  placeholder="请输入分类编码"
                  allow-clear
                  v-decorator="['catalogCode', validatorRules.catalogCode ]"/>
              </a-form-item>
              <a-form-item
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                label="排序">
                <a-input-number
                  allow-clear
                  v-decorator="[ 'sort',{'initialValue':0}]"/>
              </a-form-item>
              <a-form-item
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                label="描述">
                <a-textarea
                  allow-clear
                  placeholder="请输入描述"
                  v-decorator="['description', {'initialValue':''}]"/>
              </a-form-item>
              <a-form-item
                v-show="false"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                label="是否启用">
                <a-radio-group v-decorator="['status',validatorRules.status]" >
                  <a-radio :value="1">启用</a-radio>
                  <a-radio :value="0">停用</a-radio>
                </a-radio-group>
              </a-form-item>
            </a-form>
            <div class="anty-form-btn">
              <a-button @click="emptyCurrForm" type="default" htmlType="button" icon="sync">重置</a-button>
              <a-button :loading="buttonLoading" @click="submitCurrForm" type="primary" htmlType="button" icon="form">保存</a-button>
            </div>
          </a-card>
          <a-card v-else >
            <a-empty>
              <span slot="description"> 请先选择一个指标分类! </span>
            </a-empty>
          </a-card>
        </a-tab-pane>
      </a-tabs>

    </a-col>
    <!-- <depart-modal ref="departModal" @ok="loadTree"></depart-modal> -->
  </a-row>
</template>
<script>
// import DepartModal from './modules/DepartModal'
import pick from 'lodash.pick'
import { getAction, httpAction, deleteAction } from '@/api/manage'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import SystemScSituationIndexInfoList from './modules/SystemScSituationIndexInfoList'
export default {
  name: 'SystemList',
  components: {
    SystemScSituationIndexInfoList
    // DepartModal
  },
  mixins: [JeecgListMixin],
  data() {
    return {
      buttonLoading: false,
      replaceFields: {
        children: 'childList', title: 'catalogName', key: 'id'
      },
      selectReplaceFields: {
        children: 'childList', title: 'catalogName', key: 'id', value: 'id'
      },
      addFlag: 0, // 1新增
      activeKey: '2',
      iExpandedKeys: [],
      loading: false,
      autoExpandParent: true,
      currFlowId: '',
      currFlowName: '',
      disable: true,
      treeData: [],
      visible: false,
      departTree: [],
      rightClickSelectedKey: '',
      rightClickSelectedOrgCode: '',
      hiding: true,
      model: {},
      dropTrigger: '',
      depart: {},
      disableSubmit: false,
      checkedKeys: [],
      selectedKeys: [],
      autoIncr: 1,
      currSelected: {},
      allTreeKeys: [],
      checkStrictly: true,
      form: this.$form.createForm(this),
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      graphDatasource: {
        nodes: [],
        edges: []
      },
      validatorRules: {
        catalogName: { rules: [{ required: true, message: '请输入分类名称!', pattern: '[^ \x22]+' }] },
        catalogCode: {},
        sort: { rules: [{ required: true, message: '请输入排序!' }] },
        status: { rules: [{ required: true, message: '请输入分类状态!' }] }
      },
      url: {
        list: '/index/config/queryIndexCatalog',
        delete: '/index/scSituationIndexCatalog/delete',
        add: '/index/scSituationIndexCatalog/add',
        edit: '/index/scSituationIndexCatalog/edit',
        deleteBatch: '/index/scSituationIndexCatalog/deleteBatch'
      },
      orgCategoryDisabled: false
    }
  },
  created() {
    this.currFlowId = this.$route.params.id
    this.currFlowName = this.$route.params.name
    // this.loadTree()
  },
  methods: {

    loadData() {
      this.refresh()
    },
    loadTree(val) {
      var that = this
      that.treeData = []
      that.departTree = []

      var queryParam = {}
      if (val) {
        queryParam.catalogName = val
      }
      getAction(this.url.list, queryParam).then((res) => {
        if (res.success) {
          // 部门全选后，再添加部门，选中数量增多
          this.allTreeKeys = []
          for (let i = 0; i < res.result.length; i++) {
            const temp = res.result[i]
            that.treeData.push(temp)
            that.setThisExpandedKeys(temp)
            that.getAllKeys(temp)
            // console.log(temp.id)
          }
          this.loading = false
        }
        if (res.code === 510) {
          this.$message.warning(res.message)
        }
        this.loading = false
      })

      // queryDepartTreeList().then((res) => {
      //   if (res.success) {
      //     // 部门全选后，再添加部门，选中数量增多
      //     this.allTreeKeys = [];
      //     for (let i = 0; i < res.result.length; i++) {
      //       let temp = res.result[i]
      //       that.treeData.push(temp)
      //       that.departTree.push(temp)
      //       that.setThisExpandedKeys(temp)
      //       that.getAllKeys(temp);
      //       // console.log(temp.id)
      //     }
      //     this.loading = false
      //   }
      // })
    },
    setThisExpandedKeys(node) {
      if (node.children && node.children.length > 0) {
        this.iExpandedKeys.push(node.key)
        for (let a = 0; a < node.children.length; a++) {
          this.setThisExpandedKeys(node.children[a])
        }
      }
    },
    refresh() {
      this.loading = true
      this.loadTree()
    },
    // 右键操作方法
    rightHandle(node) {
      this.dropTrigger = 'contextmenu'
      console.log(node.node.eventKey)
      this.rightClickSelectedKey = node.node.eventKey
      this.rightClickSelectedOrgCode = node.node.dataRef.orgCode
    },
    onExpand(expandedKeys) {
      console.log('onExpand', expandedKeys)
      // if not set autoExpandParent to false, if children expanded, parent can not collapse.
      // or, you can remove all expanded children keys.
      this.iExpandedKeys = expandedKeys
      this.autoExpandParent = false
    },
    backFlowList() {
      this.$router.back(-1)
    },
    // 右键点击下拉框改变事件
    dropStatus(visible) {
      if (visible == false) {
        this.dropTrigger = ''
      }
    },
    // 右键点击下拉关闭下拉框
    closeDrop() {
      this.dropTrigger = ''
    },
    addRootNode() {
      this.$refs.nodeModal.add(this.currFlowId, '')
    },
    batchDel: function() {
      console.log(this.checkedKeys)
      if (this.checkedKeys.length <= 0) {
        this.$message.warning('请选择一条记录！')
      } else {
        var ids = ''
        for (var a = 0; a < this.checkedKeys.length; a++) {
          ids += this.checkedKeys[a] + ','
        }
        var that = this
        this.$confirm({
          title: '确认删除',
          content: '确定要删除所选中的 ' + this.checkedKeys.length + ' 条数据，以及子节点数据吗?',
          onOk: function() {
            deleteAction(that.url.deleteBatch, { ids: ids }).then((res) => {
              if (res.success) {
                that.$message.success(res.message)
                that.loadTree()
                that.onClearSelected()
              } else {
                that.$message.warning(res.message)
              }
            })
          }
        })
      }
    },
    onSearch(value) {
      const that = this
      if (value) {
        that.loadTree(value)
        // 查询条件
        // searchByKeywords({ keyWord: value }).then((res) => {
        //   if (res.success) {
        //     that.departTree = []
        //     for (let i = 0; i < res.result.length; i++) {
        //       let temp = res.result[i]
        //       that.departTree.push(temp)
        //     }
        //   } else {
        //     that.$message.warning(res.message)
        //   }
        // })
      } else {
        that.loadTree()
      }
    },
    nodeModalOk() {
      this.loadTree()
    },
    nodeModalClose() {
    },
    hide() {
      console.log(111)
      this.visible = false
    },
    onCheck(checkedKeys, info) {
      console.log('onCheck', checkedKeys, info)
      this.hiding = false
      // this.checkedKeys = checkedKeys.checked
      // <!---- author:os_chengtgen -- date:20190827 --  for:切换父子勾选模式 =======------>
      if (this.checkStrictly) {
        this.checkedKeys = checkedKeys.checked
      } else {
        this.checkedKeys = checkedKeys
      }
      // <!---- author:os_chengtgen -- date:20190827 --  for:切换父子勾选模式 =======------>
    },
    onSelect(selectedKeys, e) {
      console.log('selected', selectedKeys, e)
      this.hiding = false
      const record = e.node.dataRef
      console.log('onSelect-record', record)
      this.currSelected = Object.assign({}, record)
      this.model = this.currSelected

      this.selectedKeys = [record.id]
      if (record.pid == '0') {
        record.pid = null
      }
      this.model.pid = record.pid

      this.setValuesToForm(record)
      this.addFlag = 0
      this.activeKey = '2'
      this.$refs.systemScSituationIndexInfoList.show(record.id)
    },
    // 触发onSelect事件时,为部门树右侧的form表单赋值
    setValuesToForm(record) {
      console.log(record)
      this.$nextTick(() => {
        if (record.id === undefined || record.id === null) {
          this.form.resetFields()
          record.status = 1
        }

        this.form.setFieldsValue(pick(record, 'catalogName', 'catalogCode', 'sort', 'description', 'pid', 'status'))
        console.log(pick(record, 'catalogName', 'catalogCode', 'sort', 'description', 'pid', 'status'))
      })
    },
    getCurrSelectedTitle() {
      return !this.currSelected.catalogName ? '' : this.currSelected.catalogName
    },
    onClearSelected() {
      this.hiding = true
      // this.checkedKeys = []
      this.currSelected = {}
      this.form.resetFields()
      this.selectedKeys = []
      // this.$refs.departAuth.departId = ''
    },
    handleNodeTypeChange(val) {
      this.currSelected.nodeType = val
    },
    notifyTriggerTypeChange(value) {
      this.currSelected.notifyTriggerType = value
    },
    receiptTriggerTypeChange(value) {
      this.currSelected.receiptTriggerType = value
    },
    submitCurrForm() {
      this.form.validateFields((err, values) => {
        if (!err) {
          this.buttonLoading = true
          if (this.addFlag == 1) {
            const formData = values
            console.log('Received values of form: ', formData)
            httpAction(this.url.add, formData, 'POST').then((res) => {
              if (res.success) {
                this.addFlag = 0
                this.$message.success('保存成功!')
                this.loadTree()
                this.onClearSelected()
              } else {
                this.$message.error(res.message)
              }
              this.buttonLoading = false
            }).catch(() => {
              this.buttonLoading = false
            })
          } else {
            const formData = Object.assign(this.currSelected, values)
            console.log('Received values of form: ', formData)
            httpAction(this.url.edit, formData, 'POST').then((res) => {
              if (res.success) {
                this.$message.success('保存成功!')
                this.loadTree()
              } else {
                this.$message.error(res.message)
              }
              this.buttonLoading = false
            }).catch(() => {
              this.buttonLoading = false
            })
          }
        }
      })
    },
    emptyCurrForm() {
      this.form.resetFields(['catalogName', 'sort', 'description', 'status', []])
      // this.form.resetFields()
    },
    nodeSettingFormSubmit() {
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log('Received values of form: ', values)
        }
      })
    },
    openSelect() {
      this.$refs.sysDirectiveModal.show()
    },
    handleAdd(num) {
      this.$refs.systemScSituationIndexInfoList.clearDataSource()
      if (num == 1) {
        this.activeKey = '1'
        this.addFlag = 1
        this.setValuesToForm({})
      } else if (num == 2) {
        const key = this.currSelected.id
        if (!key) {
          this.$message.warning('请先点击选中上级分类！')
          return false
        }
        this.activeKey = '1'
        this.addFlag = 1
        this.setValuesToForm({ pid: key })
      } else {
        const key = this.rightClickSelectedKey
        if (!key) {
          this.$message.warning('请先点击选中上级分类！')
          return false
        }
        this.activeKey = '1'
        this.addFlag = 1
        this.setValuesToForm({ pid: key })
      }
    },
    handleDelete() {
      var that = this
      this.$confirm({
        title: '确认删除',
        content: '确定要删除此分类以及子节点数据吗?',
        onOk: function() {
          deleteAction(that.url.delete, { id: that.rightClickSelectedKey }).then((res) => {
            if (res.success) {
              that.$message.success(res.message)
              that.loadTree()
              that.onClearSelected()
            } else {
              that.$message.warning(res.message)
            }
          })
        }
      })
    },
    selectDirectiveOk(record) {
      console.log('选中指令数据', record)
      this.nodeSettingForm.setFieldsValue({ directiveCode: record.directiveCode })
      this.currSelected.sysCode = record.sysCode
    },
    getFlowGraphData(node) {
      this.graphDatasource.nodes.push({
        id: node.id,
        text: node.flowNodeName
      })
      if (node.children.length > 0) {
        for (let a = 0; a < node.children.length; a++) {
          const temp = node.children[a]
          this.graphDatasource.edges.push({
            source: node.id,
            target: temp.id
          })
          this.getFlowGraphData(temp)
        }
      }
    },
    // <!---- author:os_chengtgen -- date:20190827 --  for:切换父子勾选模式 =======------>
    expandAll() {
      this.iExpandedKeys = this.allTreeKeys
    },
    closeAll() {
      this.iExpandedKeys = []
    },
    checkALL() {
      this.checkStriccheckStrictlytly = false
      this.checkedKeys = this.allTreeKeys
    },
    cancelCheckALL() {
      // this.checkedKeys = this.defaultCheckedKeys
      this.checkedKeys = []
    },
    switchCheckStrictly(v) {
      if (v == 1) {
        this.checkStrictly = false
      } else if (v == 2) {
        this.checkStrictly = true
      }
    },
    getAllKeys(node) {
      // console.log('node',node);
      this.allTreeKeys.push(node.id)
      if (node.childList && node.childList.length > 0) {
        for (let a = 0; a < node.childList.length; a++) {
          this.getAllKeys(node.childList[a])
        }
      }
    }
    // <!---- author:os_chengtgen -- date:20190827 --  for:切换父子勾选模式 =======------>

  }

}
</script>
<style scoped>
  .ant-card-body .table-operator {
    margin: 15px;
  }

  .anty-form-btn {
    width: 100%;
    text-align: center;
  }

  .anty-form-btn button {
    margin: 0 5px;
  }

  .anty-node-layout .ant-layout-header {
    padding-right: 0
  }

  .header {
    padding: 0 8px;
  }

  .header button {
    margin: 0 3px
  }

  .ant-modal-cust-warp {
    height: 100%
  }

  .ant-modal-cust-warp .ant-modal-body {
    height: calc(100% - 110px) !important;
    overflow-y: auto
  }

  .ant-modal-cust-warp .ant-modal-content {
    height: 90% !important;
    overflow-y: hidden
  }

  #app .desktop {
    height: auto !important;
  }

  /** Button按钮间距 */
  .ant-btn {
    margin-left: 3px
  }

  .drawer-bootom-button {
    /*position: absolute;*/
    bottom: 0;
    width: 100%;
    border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    text-align: left;
    left: 0;
    background: #fff;
    border-radius: 0 0 2px 2px;
  }
</style>
